<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="javascript:void(0);">标签信息</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片模版 -->
        <el-card class="box-card">

            <!-- 标签导航 -->
            <el-tabs v-model="activeName" type="card" @tab-click="TagInfo">
                <el-tab-pane label="全部" name="全部"></el-tab-pane>
                <el-tab-pane label="使用中" name="使用中"></el-tab-pane>
                <el-tab-pane label="存档" name="存档"></el-tab-pane>
            </el-tabs>
            <!-- 表格模版，渲染用户信息 -->
            <el-table :data="TagInfoList" stripe style="width: 100%" border :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column prop="tag_id" label="标签ID">
                </el-table-column>
                <el-table-column prop="fix_id" label="货物类型">
                </el-table-column>
                <el-table-column prop="create_uid" label="创建人">
                </el-table-column>
                <el-table-column prop="fen_uid" label="	分配用户">
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间">
                </el-table-column>
                <el-table-column prop="update_time" label="更新时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 编辑 -->
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top" :enterable="false" v-if="scope.row.auditing != 2">
                            <el-button type="primary" size="mini" @click="UpdateUser(scope.$index, scope.row)">
                                <i class="el-icon-edit"></i>
                            </el-button>
                        </el-tooltip>
                        <!-- 归档 -->
                        <el-tooltip class="item" effect="dark" content="归档" placement="top" :enterable="false">
                            <el-button size="mini" type="danger" @click="DeleteUser(scope.$index, scope.row)">
                                <i class="el-icon-delete"></i>
                            </el-button>
                        </el-tooltip>
                        <!-- 查看校准报告 -->
                        <el-tooltip class="item" effect="dark" content="查看校准报告" placement="top" :enterable="false">
                            <el-button size="mini" type="warning" @click="RefuseUser(scope.$index, scope.row)">
                                <i class="el-icon-setting"></i>
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <template>
                <div class="block">
                    <el-pagination @size-change="GetUserPag" @current-change="GetUserPag" :current-page.sync="page" :page-sizes.sync="pagesizes" :page-size.sync="size" layout="total, sizes, prev, pager, next, jumper" :total.sync="total">
                    </el-pagination>
                </div>
            </template>
        </el-card>
        <!-- 编辑用户信息弹窗 -->
        <el-dialog :visible.sync="UpdateUserDialog" width="21%" center>
            <!-- 注册子组件 -->
            <UpdateTag :TagForm='TagForm' :UserList='UserList' :FixList='FixList' />
        </el-dialog>

    </div>
</template>

<script>
import UpdateTag from '../subunit/UpdateTag'
import moment from 'moment'
import { tag_info_get, user_info_get, fixing_info_get, delete_tag_delete } from '../axios_api/api'
export default {
    data() {
        return {
            // 分页
            pagesizes: [10, 30, 50, 100],
            size: 10,
            total: 0,
            page: 1,
            // 查看类别
            activeName: '全部',
            // 获取用户列表
            UserList: [],
            FixList: [],
            // 标签信息列表
            TagInfoList: [],
            // 弹窗
            UpdateUserDialog: false,
            TagForm: [],
        }
    },
    components: {
        UpdateTag,
    },
    mounted() {
        this.UserInfo();
    },
    methods: {
        // 编辑
        UpdateUser(index, data) {
            this.UpdateUserDialog = true;
            this.TagForm = data
        },
        // 归档
        DeleteUser(id,data) {
            // 归档选择
            this.$confirm('归档操作', '操作提示', {
                confirmButtonText: '确认归档',
                cancelButtonText: '取消',
            }).then(() => {
                let params = { tid: data.id }
                delete_tag_delete(params).then(resp => {
                    if (resp.code === 200) {
                        this.$message.success(resp.message)
                        this.$router.go(0)
                    } else {
                        this.$message.info(resp.message)
                    }
                })
            }).catch(() => {
                this.$message.info('取消归档操作')
            });
        },
        // 审核
        RefuseUser(id, data) {
					this.$message.info('待完善')
            // // 审核选择
            // this.$confirm('审核操作', '操作提示', {
            //     confirmButtonText: '通过审核',
            //     cancelButtonText: '拒绝注册',
            //     type: 'warning'
            // }).then(() => {
            //     // 通过审核
            //     let data = { uid: data, bear: '通过审核' }
            //     admin_auditing_put(data).then(resp => {
            //         this.$message.success(resp.message)
            //         this.GetTagInfo();
            //     })
            // }).catch(() => {
            //     // 拒绝审核
            //     this.$prompt('拒绝原因', '操作提示', {
            //         confirmButtonText: '提交',
            //         cancelButtonText: '取消',
            //     }).then(({ value }) => {
            //         let data = { uid: id, bear: '拒绝申请', content: value }
            //         admin_auditing_put(data).then(resp => {
            //             this.$message.info(resp.message)
            //             this.$router.go(0)
            //         })
            //     }).catch(() => {
            //         this.$message.info('取消本次审核')
            //     });
            // });
        },
        // 分页器
        GetUserPag() {
            this.TagInfo();
        },
        // 获取标签列表
        TagInfo() {
            let params = { activeName: this.activeName, page: this.page, size: this.size }
            tag_info_get(params).then(resp => {
                if (resp.code === 200) {
                    // 遍历，将用户id转换成用户名
                    for (let i = 0; i < this.UserList.length; i++) {
                        for (let j = 0; j < resp.taginfo.length; j++) {
                            if (this.UserList[i].id === resp.taginfo[j].create_uid) resp.taginfo[j].create_uid = this.UserList[i].username
                            if (this.UserList[i].id === resp.taginfo[j].fen_uid) resp.taginfo[j].fen_uid = this.UserList[i].username
                        }
                    }
                    // 遍历，将货物类型id转换成货物类型名
                    for (let i = 0; i < resp.taginfo.length; i++) {
                        // 将时间处理为可读时间
                        resp.taginfo[i].create_time = moment(resp.taginfo[i].create_time).format('YYYY-MM-DD HH:mm:ss')
                        resp.taginfo[i].update_time = moment(resp.taginfo[i].update_time).format('YYYY-MM-DD HH:mm:ss')
                        if (resp.taginfo[i].update_time === 'Invalid date') resp.taginfo[i].update_time = '暂无'
                        for (let j = 0; j < this.FixList.length; j++) {
                            if (resp.taginfo[i].fix_id === this.FixList[j].id) resp.taginfo[i].fix_id = this.FixList[j].name
                        }
                    }
                    this.TagInfoList = resp.taginfo
                    this.total = resp.total
                    console.log(resp)
                }
            })
        },
        // 获取用户列表
        UserInfo() {
            let params = { activeName: '全部', token: localStorage['token'] }
            user_info_get(params).then(resp => {
                if (resp.code === 200) {
                    this.UserList = resp.userinfo
                    this.FixInfo();
                    this.TagInfo();
                    console.log(this.UserList)
                }
            })
        },
        // 获取货物类型信息
        FixInfo() {
            fixing_info_get().then(resp => {
                if (resp.code === 200) {
                    this.FixList = resp.fixinfo
                    console.log(this.FixList)
                }
            })
        },
    },
}
</script>

<style>
</style>